<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动到顶部</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      height: 200vh;
      background-color: plum;
      display: flex;
    }

    #btn {
      width: 100px;
      height: 100px;
      margin-top: calc(100vh + 300px);
    }
  </style>
</head>
<!-- 
页面滚动到顶部
  方法一
    document.body.scrollTop=document.documentElement.scrollTop=0
  方法二
  document.body.scrollIntoView()
    scrollIntoView 是元素也有的方法, 可以用在页面元素上，例如
    document.getElementById('id').scrollIntoView()
 -->

<body>
  <button id="btn">回到顶部</button>
</body>
<script>
  "use strict"; {
    const scrollToTop = () => {
      let c = document.documentElement.scrollTop || document.body.scrollTop;
      if (c > 0) {
        window.requestAnimationFrame(scrollToTop);
        window.scrollTo(0, c - c / 8);
      };
    };
    document.getElementById("btn").addEventListener("click", () => {
      scrollToTop();
    });
  }
</script>

</html>